<template>
  <div class="category-container">
    <sticky
      :z-index="10"
      :class-name="'sub-navbar '+status"
    >

      <el-button
        v-loading="loading"
        style="margin-left: 10px;"
        type="success"
        @click="submitForm"
      >
        发布
      </el-button>

    </sticky>
    <el-form
      :model="postForm"
      ref="postForm"
      label-width="100px"
      class="demo-postForm"
    >
      <el-form-item
        label="上级名称"
        prop="name"
      >
        <el-input
          disabled=""
          v-model="postForm.ptitle"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="分类名称"
        prop="title"
        :rules="[
        { required: true, message: '请输入分类名称', trigger: 'blur' },
      ]"
      >
        <el-input v-model="postForm.title"></el-input>
      </el-form-item>
      <el-form-item
        label="icon"
        prop="icon"
        :rules="[
        { required: true, message: '请上传icon', trigger: 'blur' },
      ]"
      >
        <div class="img-cover-box">
          <div
            class="avatar"
            v-if="postForm.icon"
          >
            <span
              class="el-upload-list__item-delete"
              @click="handleRemove"
            >
              <i class="el-icon-delete"></i>
            </span>
            <img
              v-if="progress==100"
              :src="postForm.icon"
              alt=""
            >
            <el-progress
              v-else
              type="circle"
              :percentage="progress"
            ></el-progress>
          </div>

          <el-upload
            action="#"
            list-type="picture-card"
            :before-upload="clickUpload"
            :show-file-list="false"
          >
            <i
              slot="default"
              class="el-icon-plus"
            ></i>

          </el-upload>
        </div>
        <el-input
          v-model="postForm.icon"
          v-show="false"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="排序"
        prop="name"
      >
        <el-input v-model="postForm.sort"></el-input>
      </el-form-item>

    </el-form>
  </div>

</template>
<script>
import { apiDefault } from "../config";
import api from "@/api/index";
import { client } from "@/api/qiniu";
import Sticky from "@/components/Sticky"; // 粘性header组件

const qiniu = client();
export default {
  components: { Sticky },
  created() {
    if (this.isEdit) {
      const id = this.$route.params && this.$route.params.id;
      console.log(this.$route.query);

      this.fetchData(id);
      this.$set(
        this.postForm,
        "ptitle",
        (this.$route.query && this.$route.query.title) || "无上级"
      );

      this.tempRoute = Object.assign({}, this.$route);
    } else {
      this.postForm.pid = (this.$route.query && this.$route.query.id) || 0;
      this.postForm.ptitle =
        (this.$route.query && this.$route.query.title) || "无上级";
    }
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    status() {
      if (this.isEdit) return "";
      else return "draft";
    }
  },
  data() {
    var postForm = { title: "", pid: 0, ptitle: "无上级" };
    return {
      apiDefault,
      postForm,
      loading: false,
      progress: 0,
      tempRoute: {}
    };
  },
  methods: {
    clickUpload(flie) {
      this.progress = 0;
      qiniu
        .upload(flie, res => {
          this.progress = res;
        })
        .then(res => {
          this.$set(this.postForm, "icon", res);
        });
    },
    submitForm() {
      this.loading = true;

      var func = this.apiDefault + "Store";
      var data = {
        pid: this.postForm.pid,
        title: this.postForm.title,
        sort: this.postForm.sort,
        icon: this.postForm.icon
      };
      var message = "发布成功";

      if (this.isEdit) {
        data.id = this.postForm.id;
        message = "修改成功";
      }

      this.$refs.postForm.validate(valid => {
        if (valid) {
          api[func](data).then(res => {
            this.loading = false;
            this.$notify({
              title: "成功",
              message,
              type: "success",
              duration: 2000
            });
            this.loading = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleRemove() {
      this.$set(this.postForm, "icon", "");
    },
    fetchData(id) {
      var func = this.apiDefault + "Detail";
      api[func]({ id }).then(res => {
        console.log(res.result);
        var obj = res.result;
        this.$set(this.postForm, "icon", obj.icon);
        this.$set(this.postForm, "title", obj.title);
        this.$set(this.postForm, "sort", obj.sort);
        this.$set(this.postForm, "id", obj.id);
        this.progress = 100;
      });
    },
    setTagsViewTitle() {
      const title = "编辑";
      const route = Object.assign({}, this.tempRoute, {
        title: `${title}`
      });
      this.$store.dispatch("tagsView/updateVisitedView", route);
    }
  }
};
</script>
<style lang="scss" scoped>
.category-container {
  position: relative;
  .demo-postForm {
    padding: 80px 45px 20px 50px;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.img-cover-box {
  display: flex;
}
.img-cover-box .avatar {
  width: 148px;
  height: 148px;
  margin-right: 10px;
  display: block;
  position: relative;
}
.img-cover-box .avatar:hover .el-upload-list__item-delete {
  display: flex;
}
.img-cover-box .avatar img {
  width: 100%;
  height: 100%;
}

.el-upload-list__item-delete {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.82);
  align-items: center;
  justify-content: center;
}
.el-upload-list__item-delete i {
  color: #fff;
  font-size: 30px;
  cursor: pointer;
}
.submit-top {
  position: absolute;
  width: 100%;
  background: #d0d0d0;
  height: 50px;
  top: 0;
  left: 0;
  padding: 6px 12px;

  display: flex;
  flex-direction: row-reverse;
}
</style>
